<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue 示例</title>
</head>

<body>
    <!-- 数据绑定和第一个vue应用 -->
    <div id="app">
        <input type="text" v-model="name" placeholder="你的名字">
        <h1>你好,{{name}}</h1>
    </div>
   
    <!-- 放一张图片 -->
    <div id="app-2">
        <img v-bind:src="imgs" alt="" height="300" width="400">
    </div
    >
    <!-- 生命周期 -->

    <div id="app-3">
        {{eat}}
    </div>

    <!-- 事件 v-on:click-->    

    <div id="app-4">
        <p v-if="show">现在你能看到我</p>
        <button v-on:click="show = false">点击隐藏</button>
        <button v-on:click="show = true">点击显示</button>
        <br><br>
        <p v-if="hide">我隐身了</p>
        <br>        
        <button v-on:click="hide = true">现身</button>
        
        <a v-bind:href="url">百度一下，你就知道</a>
       
    </div>

     <!-- 数据绑定 -->

     <div id="app-5">
            {{msg}}

            <!-- 过滤器 -->
            {{msg | formatString}}

            <!-- 计算属性 -->
            {{newMsg}}
        </div>

        
        



        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                name: ''
            }
        })


        var app2=new Vue({
            el:'#app-2',
            data:{
                imgs:'./imgs/b64543a98226cffc7a951157b8014a90f703ea9c.jpg'
            }
            
        })

        var app3=new Vue({
            el:'#app-3',
            data:{
                eat:'吃饭啦',
            },
            created:function(){
                console.log(this.eat);//吃饭啦
            },
            mounted:function(){
                console.log(this.$el);//<div id="app-3">吃饭啦</div>
            },                    
        })

        var app4=new Vue({
            el:'#app-4',
            data:{
                show:true,
                hide:false,
                url:"http://baidu.com"
            },                                
        })

        var app5 = new Vue({
            el: '#app-5',
            data: {
                msg: 'Hello Vue!'
            },
            filters:{
                formatString(val){
                    return "中国红";
                }
            },
            computed:{
                newMsg:function(){
                    return this.msg+"中国蓝"
                }
            }
        })



    </script>
</body>

</html>